<template>
    <div class="index">
      <vue-header>
        <a href="javascript:;" slot="left" class="fl">黄氏烘焙</a>
        <span slot="middle" class="fl"></span>
        <span slot="right" class="el-icon-setting fr"></span>
      </vue-header>
       <div class="location">
            <div class="tips clearfix">
                <span class="fl">当前定位城市：</span>
                <span class="fr">定位不准时，请在城市列表中选择</span>
            </div>
            <div class="local clearfix">
               <router-link to="/disctrict" class="fl">{{local}}</router-link>
               <router-link to="/disctrict" class="fr el-icon-arrow-left"></router-link>
            </div>
       </div>
       <div class="hot">
           <ul>
               <li v:for="item in hotCity">
                   <router-link></router-link>
               </li>
           </ul>
       </div>
    </div>
</template>
<script src="http://api.map.baidu.com/api?ak=8Q86loio8whM9AzIHughw12PkKSFXYYK&v=2.0&services=false"></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/DrawingManager/1.4/src/DrawingManager_min.js&quot;></script>
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.4/src/SearchInfoWindow_min.js&quot;></script>
<script>
import header from "../common/header/header.vue"
// data,钩子函数（声明函数）、需要要引入的组件都在export default中书写
    export default {
        name: "address",
        components: {
            "vue-header": header,
        },
        data: () => {
            return  {
                 local: "广州",
                 logo: "广州",
            hotCity: [
                {city: "上海"},
                {city: "哈尔滨"},
                {city: "南京"},
                {city: "广州"},
                {city: "厦门"}
            ]
            }
        }
        // created: function () {
        //     console.log("进来的");
        //     navigator.geolocation.getCurrentPosition(function (position) {
        //         var lat = position.coords.latitude;
        //         var lon = position.coords.longitude;
        //         console.log(lat);
        //         console.log(lon);
        //         var point = new BMap.Point(lon,lat); // 创建坐标点
        //         // 根据坐标得到地址描述
        //         var myGeo = new BMap.Geocoder();
        //         myGeo.getLocation(point,(result)=>{
        //             var city =  result.addressComponents.city;
        //             console.log(city);
        //             console.log("bushiedd");
        //         })          
        //   })
        // },
    
    }
</script>
<style class="scoped" lang="less">
    @import "../../css/common.less";
     @cblue: #1D8CE0;
     .fontSize(@x) when (default()) {font-size: @x;}
        .index {
            background-color: #eee;
        
     }
     .location {
         background-color: #fff;
         border-bottom: 3px solid #ddd;
         margin-bottom: 0.1rem;
        .tips {
            border-bottom: 1px solid #ddd;
            span {
                margin-left: 0.2rem;
                .fontSize(12px);
                line-height: 30px;
            }
            span:last-child {
                margin-right: 0.2rem;
            }
        }
        .local {
            a:last-child {
                .fontSize(12px);
                margin-right: 0.1rem;
                line-height: 30px;
            }
            a:first-child {
                color: #1D8CE0;
                .fontSize(14px);
                margin-left: 0.2rem;
                line-height: 30px;
            }
        }
     }
</style>